<template>
 <div>
    <!-- 搜索条件 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline'>
        <a-row :gutter='48'>
          <a-col :md='8' :sm='24'>
            <a-form-item label='报表日期'>
              <a-range-picker @change='onChange' v-model='timeValue' />
            </a-form-item>
          </a-col>

          <a-col :md='8' :sm='24'>
            <span class='table-page-search-submitButtons'>
              <a-button type='primary' icon='search' @click='loadData'>查询</a-button>
              <a-button type='primary' style='margin-left: 8px' icon='reload' @click='reload'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
<!--    <div class='table-operator'>-->
<!--      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>-->
<!--    </div>-->

    <!--table-->
    <a-spin :spinning='downLoading' tip=' 正在下载数据，请耐心等待'>
      <a-table
        :rowKey="record => record.id"
        ref='table'
        size='middle'
        bordered
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        @change='handleTableChange'
        :loading='loading'
      >
            <span slot='action' slot-scope='text, record'>
                  <a @click='handleEdit(record.id,record.beginDate)'> 编辑 </a>
                <a-divider type='vertical' />
            <a @click='handleDetail(record)'>预览</a>
            <a-divider type='vertical' />
            <a @click='loadDown(record)'> 下载 <a-icon type='download' /></a>
          </span>
      </a-table>
    </a-spin>

    <word-show-modal ref='detailModal'></word-show-modal>
 </div>
</template>

<script>


import WordShowModal from '@views/data-governance/smart-reports/epidemic-weekly/components/WordShowModal'
import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'

export default {
  components: {
    WordShowModal
  },
  data() {
    return {
      timeValue: undefined,
      downLoading: false,
      // 查询参数
      queryParam: {
        beginDate: '',
        endDate: '',
        pageSize: 10,
        pageIndex: 1
      },
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '开始日期',
          dataIndex: 'beginDate',
          align: 'center',
        },
        {
          title: '结束日期',
          dataIndex: 'endDate',
          align: 'center',
        },
        {
          title: '工单数',
          align: 'center',
          dataIndex: 'total'
        },
        {
          title: '环比',
          align: 'center',
          dataIndex: 'annulus'
        },
        {
          title: '办结率',
          align: 'center',
          dataIndex: 'completionRate'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      /* table加载状态 */
      loading: false
      // 加载数据方法 必须为 Promise 对象

    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true;
      this.dataSource=[]
      this.ipagination.total=0
      this.queryParam.pageSize=this.ipagination.pageSize
      this.queryParam.pageIndex=this.ipagination.current
      console.log(this.queryParam)
      ReportsEpidemicWeeklyService.getPeriodStatistics(this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    reload() {
      this.queryParam = {
        beginDate: '',
        endDate: '',
        pageSize: 10,
        pageIndex: 1
      }
      this.ipagination.pageSize = 10
      this.ipagination.current = 1
      this.timeValue = undefined
      this.loadData()
    },
    onChange(date, dateString) {
      this.queryParam.beginDate = dateString[0].replace(/-/g, '')
      this.queryParam.endDate = dateString[1].replace(/-/g, '')
    },
    handleAdd() {
      this.$router.push('/report/admin-epidemic-weekly-add')
    },
    handleTableChange(pagination) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    },
    handleDetail(row) {
      this.$refs.detailModal.open(row)
    },
    loadDown(item) {
      let params={
        periodId:item.id,
        beginDate:item.beginDate
      }
      this.downLoading=true;
      ReportsEpidemicWeeklyService.generateWord(params).finally(()=>{
        this.downLoading=false
      })
    },
    handleEdit(periodId,beginDate){
      beginDate=beginDate.replace(/-/g,'')
      this.$router.push({path:'/report/admin-epidemic-weekly-add',query:{"beginDate":beginDate,"periodId":periodId}})
    }
  }
}
</script>